<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>align-self</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        border:1px black solid;
        width: 602px;
        height: 300px;
        margin: 100px auto 0;
        /* flex布局 */
        display: flex;
        /*第一步：容器为 项目设置 对齐方式为 居中*/
        align-items: center;
    }

    .item {
        /* text-align: center; */
        height: 50px;
        line-height: 50px;
        /*为项目设置 flex属性*/
        flex: 1;
    }

    .item:first-child {
        background-color: #f40;
        /* 第二步：第一个项目把自己的对齐方式设置为auto，表示 继承父元素的align-items属性*/
        align-self: baseline;
        height:auto;
    }

    .item:nth-child(2) {
        background-color: lightblue;
        /* 第三步：第二个项目把自己的 对齐方式设置为flex-start，项目自己设置值并且不为auto的时候，就用自己设置的*/
        /*align-self: flex-start;*/
        align-self: baseline;
        height:auto;
    }

    .item:last-child {
        background-color: #daa520;
        /* 第四步：第三个项目并没有设置 align-self属性，项目 便会继承 容器设置的值 */
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">第一个项目</div>
        <div class="item">第二个项目</div>
        <div class="item">第三个项目</div>
    </div>
</body>

</html>